
import classnames from "classnames"
import { IActionOpts } from '@/types'
import PopoverInput from './PopoverInput'
import { IPositionAttrs } from '@/types/title'
import { useElementSize } from '@mantine/hooks'
import { ADJUST_POSITION_SIZE } from "@/settings"
import { TitleActionEnums } from '@/enums/titleEnums'

export enum AdjustPositionLineEnums {
  lt = 'leftTop',
  rt = 'rightTop',
  lb = 'leftBottom',
  rb = 'rightBottom'
}

export enum AdjustPositionEnums {
  L = 'left',
  R = 'right',
  B = 'bottom',
  T = 'top'
}

interface AdjustPositionCmptProps {
  value?: IPositionAttrs,
  onChange?: (opts: IActionOpts<TitleActionEnums>) => void
}

export function AdjustPositionCmpt({
  value,
  onChange
}: AdjustPositionCmptProps) {
  const { ref, width, height } = useElementSize();
  const innerWidth = width - ADJUST_POSITION_SIZE * 4;

  /** 获取分割线样式 */
  function getWhiteLineStyles(type: AdjustPositionLineEnums) {
    const adjacent = ADJUST_POSITION_SIZE * 2;
    const width = Math.pow(adjacent, 2);
    const hypotenuse = Math.sqrt(Math.pow(ADJUST_POSITION_SIZE, 2) + width);
    const degRadian = Number(Math.acos(adjacent / hypotenuse).toFixed(2));
    const deg = degRadian * (180 / Math.PI);

    if (type === AdjustPositionLineEnums.lt) {
      return {
        height: `${hypotenuse.toFixed(2)}px`,
        transform: `rotate(${-(90 - deg).toFixed(2)}deg)`,
        left: '19px',
        top: '-12px'
      }
    }

    if (type === AdjustPositionLineEnums.rt) {
      return {
        height: `${hypotenuse.toFixed(2)}px`,
        transform: `rotate(${(90 - deg).toFixed(2)}deg)`,
        right: '19px',
        top: '-12px'
      }
    }

    if (type === AdjustPositionLineEnums.lb) {
      return {
        height: `${hypotenuse.toFixed(2)}px`,
        transform: `rotate(${(90 - deg).toFixed(2)}deg)`,
        left: '19px',
        top: `${height - ADJUST_POSITION_SIZE - 13}px`
      }
    }

    return {
      height: `${hypotenuse.toFixed(2)}px`,
      transform: `rotate(${(-90 + deg).toFixed(2)}deg)`,
      right: '19px',
      top: `${height - ADJUST_POSITION_SIZE - 13}px`
    }
  }

  function onAction(opts: IActionOpts<TitleActionEnums>) {
    if (typeof onChange === 'function') {
      onChange(opts);
    }
  }

  return (
    <div ref={ref} className="relative bg-blue-100 flex items-center justify-center" style={{ height: `${ADJUST_POSITION_SIZE * 3}px` }} >
      <div className="absolute bg-white w-[2px]"
        style={getWhiteLineStyles(AdjustPositionLineEnums.lt)} ></div>
      <div className="absolute bg-white w-[2px]"
        style={getWhiteLineStyles(AdjustPositionLineEnums.rt)} ></div>
      <div className="absolute bg-white w-[2px]"
        style={getWhiteLineStyles(AdjustPositionLineEnums.lb)} ></div>
      <div className="absolute bg-white w-[2px]"
        style={getWhiteLineStyles(AdjustPositionLineEnums.rb)} ></div>

      <div className={classnames(`bg-white font-bold flex items-center justify-center text-gray-400 text-[12px]`)} style={{ width: `${innerWidth}px`, height: `${ADJUST_POSITION_SIZE}px` }} >
        Position
      </div>

      <PopoverInput
        defaultValue={value?.left}
        btnCls='absolute left-0 w-[40px] p-0'
        onChange={(val) => onAction({ event: TitleActionEnums.Left, data: val })} />

      <PopoverInput
        defaultValue={value?.right}
        btnCls='absolute right-0 w-[40px] p-0'
        onChange={(val) => onAction({ event: TitleActionEnums.Right, data: val })} />

      <PopoverInput
        defaultValue={value?.top}
        btnCls='absolute top-0 w-[40px] p-0 h-[20px]'
        onChange={(val) => onAction({ event: TitleActionEnums.Top, data: val })} />

      <PopoverInput
        defaultValue={value?.bottom}
        btnCls='absolute bottom-0 w-[40px] p-0 h-[20px]'
        onChange={(val) => onAction({ event: TitleActionEnums.Bottom, data: val })} />
    </div>
  )
}